<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta charset="gb2312">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=dege" />
    <meta name="format-detection" content="telephone=no" />
    <title>知了</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/swiper.min.css" />
    <link rel="stylesheet" href="css/animate.min.css" />
    <link href="images/favicon.ico" rel="icon" type="images/x-icon">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/headfoot.css" />
    <link rel="stylesheet" href="css/dyf.css">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/swiper.jquery.min.js"></script>
    <script src="js/index.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/wow.min.js"></script>
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <script>
        if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
            new WOW().init();
        }
    </script>
</head>

<body>

    <div class="return">
        <div class="return-title">
            <div class="in">
                <h1>找回密码</h1>
            </div>
        </div>
        <div class="in">
            <div class="return-cont">
                <p> <i></i> 请输入你需要找回登录密码的账户名</p>
                <ul>
                    <li>
                        <label for="">登录名：</label> <input name="phone" placeholder="手机/邮箱/会员名" type="text"> <a
                            href="#">忘记会员吗？</a>
                    </li>
                    <li>
                        <div class="verify">
                            <span>验证:</span>
                            <div id="verify_box">
                                <div id="verify_xbox" name="img">
                                    <div id="btn">
                                        <img src="images/lllllll.png" style="margin-top:3px">
                                    </div>
                                </div>
                                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;按住滑块，拖动到最右边
                            </div>
                        </div>
                    </li>
                    <li class="return-btn">
                        <a href="" class="quezzmm">确定</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <script>
        var box = document.getElementById('verify_box');
        var xbox = document.getElementById('verify_xbox');
        var element = document.getElementById('btn');
        var b = box.offsetWidth;
        var o = element.offsetWidth;
        element.ondragstart = function () {
            return false;
        };
        element.onselectstart = function () {
            return false;
        };
        element.onmousedown = function (e) {
            var disX = e.clientX - element.offsetLeft;
            document.onmousemove = function (e) {
                var l = e.clientX - disX + o;
                if (l < o) {
                    l = o
                }
                if (l > b) {
                    l = b
                }
                xbox.style.width = l + 'px';
            };
            document.onmouseup = function (e) {
                var l = e.clientX - disX + o;
                if (l < b) {
                    l = o

                } else {
                    l = b;
                    xbox.innerHTML = '验证通过<div id="btn"><img style="margin-top:0" src="images/kkkk.png"/></div>';
                }
                xbox.style.width = l + 'px';
                document.onmousemove = null;
                document.onmouseup = null;
            };
        }
    </script>
</body>

</html>